<template lang="html">
  <div class="medals-owned">
    <div v-if="false">{{userType}}{{testData}}</div>
    <a class="content" href="javascript:;">
      <div class="row">
        <div class="col-xs-4 no-padding" v-for="(item,index) in medalsOwned.list" v-if="index<3">
          <img :src="item.iconURL" class="img-responsive">
        </div>
        <div class="col-xs-4 no-padding" v-if="medalsOwned.list.length == 0">
          <img src="https://dl.app.gtja.com/pictures/insigniaPictures/chulaizadao@2x.png" class="img-responsive">
        </div>
        <div class="col-xs-4 no-padding" v-if="medalsOwned.list.length<3">
          <img src="~assets/images/morenxunzhang@3x.png" class="img-responsive">
        </div>
        <div class="col-xs-4 no-padding" v-if="medalsOwned.list.length<2">
          <img src="~assets/images/morenxunzhang@3x.png" class="img-responsive">
        </div>
      </div>
    </a>
  </div>
</template>

<script>
  /**
   * 动态页和个人详情页的勋章栏
   */
  import RemoteDAO from 'common/remoteDAO'
  import Constant from 'common/constant'
  import LocalDAO from 'common/localDAO'

  export default {
    data () {
      return {
        medalsOwned:{list:[]},
        testData:'testData',
        error: ''
      }
    },
    props: {
      userType: {
        type: String
      },
      medalsProps: {
        type: Object
      }
    },
    created: function () {
      this.fetchData()
    },
    watch: {
      '$route' (to, from) {
        //刷新参数放到这里里面去触发就可以刷新相同界面了
        this.fetchData ()
      }
    },
    methods: {
      fetchData () {
        this.medalsOwned = this.medalsProps
      }
    }
  }
</script>

<style scoped>

</style>
